class Details2{
    constructor(){
        this.cont2 = document.querySelector(".cont");
        this.url2 = "http://localhost/project/data/goods2.json";

        this.load();
        this.getId();
    }
    getId(){
        // 获取地址栏的url后拼接的数据
        this.id = location.search.slice(1).split("=")[1];
    }
    load(){
        // 请求商品数据库：json
        ajax({
            url:this.url2
        }).then((res)=>{
            this.res = JSON.parse(res);
            this.display();
        })
    }
    display(){
        // 将接收到的商品id和商品数据中的id作比较
        this.res.forEach(val => {
            if(val.goodsId === this.id){
                console.log(val);
                // 根据val的数据内容化，渲染商品详情页
                // this.cont.innerHTML = "hello";
                this.cont2.innerHTML = `
                <div class="magnifier">
                    <div class="s_box">
                        <img src="${val.img.largeImg[0]}" alt="">
                        <span></span>
                        <p class="mask"></p>
                    </div>
                    <div class="b_box">
                        <img src="${val.img.largeImg[0]}" alt="">
                    </div>
                    <span class="clear"></span>
                    <ul class="list">
                        ${this.createLi(val.img.smallImg)}
                    </ul>
                </div>
                <div class="goodsMsg">
                    <h3>${val.name}</h3>
                    <p>价格：<span>${val.price}</span></p>
                    <p>品牌：<span>${val.brand}</span></p>
                    <p>上架时间：<span>${val.uptime}</span></p>
                    <p>名称：<span>${val.title}</span></p>
                    <p>商品编号：<span>${val.goodsId}</span></p>
                    <b>加入购物车</b>
                </div>`;
                // 页面渲染完成后，可以执行放大镜的效果了
                // 执行放大镜时，将遍历到的数据，传入，方便切换大图
                new Large2(val.img);
            }
        });
    }
    createLi(arr){
        // 根据小图的数量生成对应的结构的功能
        let str = "";
        for(let i=0;i<arr.length;i++){
            str += `<li><img src="${arr[i]}" alt=""></li>`
        }
        return str;
    }
}
new Details2;

// 注意：70行代码，功能：用来充当小滑块和鼠标之间的隔板，解决小滑块抖动的问题
// 注意：77行代码，功能：根据小图的数量生成对应的结构




class Large2{
    constructor(imgData){
        this.sBox = document.querySelector(".s_box");
        this.sImg = document.querySelector(".s_box img");
        this.sSpan = document.querySelector(".s_box span");
        this.bBox = document.querySelector(".b_box");
        this.bImg = document.querySelector(".b_box img");
        this.li = document.querySelectorAll(".list li");

        this.imgData = imgData;
        
        this.addEvent();
    }
    addEvent(){
        var that = this;
        this.sBox.onmouseover = function(){
            that.over();
        }
        this.sBox.onmousemove = function(eve){
            var e = eve || window.event;
            that.move(e);
        }
        this.sBox.onmouseout = function(){
            that.out();
        }
        for(let i=0;i<this.li.length;i++){
            this.li[i].onclick = function(){
                that.sImg.src = that.imgData.largeImg[i];
                that.bImg.src = that.imgData.largeImg[i];
            }
        }
    }
    over(){
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
    }
    move(e){
        // 因为页面结构日渐复杂，所以将pageX改回offsetX，但是灰色小滑块会抖，解决方式，纯布局结局
        var l = e.offsetX - this.sSpan.offsetWidth/2;
        var t = e.offsetY - this.sSpan.offsetHeight/2;
        if(l<0) l=0;
        if(t<0) t=0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
        this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
    }
    out(){
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}